import React, { Component } from 'react'
import { View, TouchableWithoutFeedback, Text, ScrollView, Button, Dimensions, } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import Recommend from '../pages/Home/components/Recommend'
import News from '../pages/Home/News'

const TabNavigator = createMaterialTopTabNavigator()

function HomeTopNav(){
  return (
    <TabNavigator.Navigator
      // tabBar={(props)=>{
      //   console.log('props',props);
      //   const { state, descriptors, } = props
      //   return (
      //     <View style={{width:Dimensions.get('window').width,height:40}}>
      //       <ScrollView
      //         horizontal={true}
      //         showsHorizontalScrollIndicator={false}
      //       >
      //         {
      //           state.routes.map((route,index)=>{
      //             const { options } = descriptors[route.key];
      //             const label =
      //               options.tabBarLabel !== undefined
      //                 ? options.tabBarLabel
      //                 : options.title !== undefined
      //                 ? options.title
      //                 : route.name;
      //             return(
      //               <Text style={{paddingLeft:15,paddingRight:15,height:40,lineHeight:40}}>{label}</Text>
      //             )
      //           })
      //         }
      //       </ScrollView>
      //     </View>
      //   )
      // }}
      tabBarOptions={{
        activeTintColor:'#333',
        inactiveTintColor :'#999',
        tabStyle:{
          width:100,
        },
        labelStyle:{
          fontSize:14,
        },
        indicatorStyle:{
          backgroundColor:"#d5af00",
          width:25,
          marginLeft:38,
        },
        style:{
        },
        scrollEnabled:true,
      }}
    > 
      <TabNavigator.Screen 
        name='home-recommend'
        component={Recommend}
        options={{
          title:'推荐'
        }}
      />
      <TabNavigator.Screen 
        name='home-news'
        component={News}
        options={{
          title:'CG资讯'
        }}
      />
      <TabNavigator.Screen 
        name='home-material'
        component={News}
        options={{
          title:'素材库'
        }}
      />
      <TabNavigator.Screen 
        name='home-club'
        component={News}
        options={{
          title:'CG俱乐部'
        }}
      />
      <TabNavigator.Screen 
        name='home-club1'
        component={News}
        options={{
          title:'CG俱乐部'
        }}
      />
      <TabNavigator.Screen 
        name='home-club12'
        component={News}
        options={{
          title:'CG俱乐部'
        }}
      />
    </TabNavigator.Navigator>
  )  
}


export default class HomeTopNavigation extends Component {
  render() {
    return (
      <HomeTopNav></HomeTopNav>
    )
  }
}
